(function(pageName){
  sugarcane.module[pageName] = function(){
    var urlParams = sugarcane.getUrlParams(),
      channelId = urlParams['channelId'],
      channelType = urlParams['channelType'],
      page = urlParams['page'] || 1;

    $('.j-pagescreen').addClass('fn-hide');
    if ($('#j-screen-'+pageName).length) {
      var pageScreen = $('#j-screen-'+pageName+id);
      pageScreen.removeClass('fn-hide');
      var _scrollTop = pageScreen.data('scrolltop') || 0;
      setTimeout(function(){
        $(window).scrollTop(_scrollTop);
      }, 10);
      return false;
    }
    var pageScreen = $(`<div class="j-pagescreen" id="j-screen-'+pageName+'">
      <div class="app-mlist">
        <div class="mlist-head">
          <div class="swiper-container  j-headswiper" >
            <ul class="swiper-wrapper list-nav j-listnav"></ul>
          </div>

        </div>
        <div class="mlist-scroll j-listswiperscroll">
          <div class="swiper-container swiper-container-horizontal j-listswiper" >
            <ul class="swiper-wrapper list-scroll j-listscroll">
             
            </ul>
            <div class="swiper-pagination">
            </div>
          </div>
        </div>
        <div class="mlist-content j-listbody"></div>
        <div class="listmore j-listmore">点击加载更多</div>
      </div>
      </div>`);
    $('body').append(pageScreen);

    
    showlist();
    $('.j-listmore').on('tap',function(){
      page++;
      var req = {
        "channelId": $('.j-listnav .list-active').data('id'),
        "channelType": $('.j-listnav .list-active').data('type'),
        "current": page
      };
      showlistnews(req);
    });

    function showlist(){
      sugarcane.ajaxApi({
        url: '/channel/list',
        data: {},
        "callback": function(res){
          if(res.code == 0){
            var liObj = ``;
            $(".j-listnav").empty();
            res.data.myChannelList.forEach(function(item,index){
              var liObj = `<li class="swiper-slide" data-id="`+item.channelId+`" data-type="`+item.channelType+`">`+item.name+`</li>`;
              $(".j-listnav").append(liObj);
            });
            res.data.moreChannelList.forEach(function(item,index){
              var liObj = `<li class="swiper-slide" data-id="`+item.channelId+`" data-type="`+item.channelType+`">`+item.name+`</li>`;
              $(".j-listnav").append(liObj);
            });

            var req = {
              "channelId": channelId || res.data.myChannelList[0].channelId,
              "channelType": channelType || res.data.myChannelList[0].channelType,
              "current": page 
            };
            showlistnews(req);
            var headSwiper = new Swiper('.j-headswiper',{
              slidesPerView: 'auto',
              freeMode: true,
              observer: true,
              observeParents: true
            });
            if(channelId){
              pageScreen.find('.j-listnav li[data-id="'+channelId+'"]').addClass('list-active');
            }else{
              pageScreen.find('.j-listnav li:first-child').addClass('list-active');
            }
            
            pageScreen.find('.j-listnav li').click(function(){
              var _this = this;
              $(this).siblings().removeClass('list-active');
              $(this).addClass('list-active');
              var req = {
                "channelId": $(_this).data('id'),
                "channelType": $(_this).data('type'),
                "current": page
              };
              $.extend(urlParams,req);
              locationSearch(urlParams);
              $('.j-listswiperscroll').addClass('fn-hide');
              $('.j-listbody').empty();
              showlistnews(req);
            });
          }
        }
      });
    }

    function showlistnews(req){
      sugarcane.ajaxApi({
        url: '/news/list',
        data: req,
        callback: function(res){
          if(res.code == '0'){
            if(res.data.carouselList &&res.data.carouselList.length){
              $('.j-listswiperscroll').removeClass('fn-hide');
              $(".j-listscroll").empty();
              res.data.carouselList.forEach(function(item,index){
                  var liObj = ` <li class="swiper-slide list-carou-li swiper-slide-active swiper-slide-duplicate-next swiper-slide-duplicate-prev" >       
                  <a href="`+item.shareUrl+`">             
                    <img src="`+item.carouselImg+`" class="j-img" data-showtype="`+item.showType+`">     
                    <div class="scroll-text">     
                      <p class="">`+item.title+`</p>     
                    </div>     
                  </a>    
                </li>
                `;
                $(".j-listscroll").append(liObj);

              });

              $(".j-listscroll").find('.j-img').each(function(){
                var _this = $(this),showtype = _this.data('showtype');

                _this.error(function(){
                  if(showtype){
                    if ( showtype == '102') {//大图
                      _this.attr('src', "/static/img/16x9default.png");
                      _this.removeClass('j-img')
                    } else if ((showtype == '1031') || (showtype == '111')){//三图
                      _this.attr('src', "/static/img/3x1default.png");
                      _this.removeClass('j-img')
                    } else {
                      _this.attr('src', "/static/img/4x3default.png");
                      _this.removeClass('j-img')
                    }
                  }else{
                    _this.attr('src', "/static/img/4x3default.png");
                    _this.removeClass('j-img')
                  }
                });
              });
              var listScroll = new Swiper('.j-listswiper',{
                slidesPerView: '1',
                loop: true,
                autoplayDisableOnInteraction:false,
                pagination: {
                  el: '.swiper-pagination'
                }
              });

            }else{
              if(page == '1'){
                $('.j-listswiperscroll').addClass('fn-hide');
              } 
              
            }

            if(res.data.newsList && res.data.newsList.length){
              if(req.channelType != '1'){
                sugarcane.module.load('listitem', function(listitemFn){
                  $.each(res.data.newsList,function(i,o){
                    var _this = this;
                      var _obj = listitemFn(this);
                 
                    if(!o.newsType){
                      _obj.find('.item-contain').addClass('fastnews')
                      _obj.find('.title').css('-webkit-line-clamp','');
                      
                    }
                    _obj.find('img').addClass('j-img');
                    _obj.find('img').data('showtype',o.showType);
                    _obj.data('shareurl',o.shareUrl);
                    if(_obj){
                      $('.j-listbody').append(_obj);
                      _obj.find('.j-img').error(function(){
                        var _this = $(this),showtype = _this.data('showtype');
                        if(showtype){
                          if ( showtype == '102') {//大图
                            _this.attr('src', "/static/img/16x9default.png");
                            _this.removeClass('j-img')
                          } else if ((showtype == '1031') || (showtype == '111')){//三图
                            _this.attr('src', "/static/img/3x1default.png");
                            _this.removeClass('j-img')
                          } else {
                            _this.attr('src', "/static/img/4x3default.png");
                            _this.removeClass('j-img')
                          }
                        }else{
                          _this.attr('src', "/static/img/4x3default.png");
                          _this.removeClass('j-img')
                        }
                      });

                      // _obj.on('click', function(){
                      //   alert(1)
                      //   location.href = _this.shareUrl;
                      // });
                    }
                  });
                  $('.j-listbody .app-listitem').click(function(){
                    location.href = $(this).data('shareurl');
                  });
                });
              }else {
                $.each(res.data.newsList,function(i,o){
                  var _obj = $(`<div class="app-listitem grapes-themelist">
                    <img src="`+o.listImgs[0]+`" class="image j-img" data-showtype="`+o.showType+`">
                    <div class="theme-text">
                      <p class="time">`+o.publishTime+`</p>
                      <p class="title">`+o.title+`</p>
                    </div>
                  </div>`);
                  var _detailHref = 'special.html?id='+this['id'];
                  _obj.data('shareurl', _detailHref);
                  $('.j-listbody').append(_obj);
                  _obj.find('.j-img').error(function(){
                    var _this = $(this),showtype = _this.data('showtype');
                    if(showtype){
                      if ( showtype == '102') {//大图
                        _this.attr('src', "/static/img/16x9default.png");
                        _this.removeClass('j-img')
                      } else if ((showtype == '1031') || (showtype == '111')){//三图
                        _this.attr('src', "/static/img/3x1default.png");
                        _this.removeClass('j-img')
                      } else {
                        _this.attr('src', "/static/img/4x3default.png");
                        _this.removeClass('j-img')
                      }
                    }else{
                      _this.attr('src', "/static/img/4x3default.png");
                      _this.removeClass('j-img')
                    }
                  });

                });
                $('.j-listbody .app-listitem').click(function(){
                  location.href = $(this).data('shareurl');
                });
              }
            }

            

            if(!res.hasMore){
              $('.j-listmore').addClass('fn-hide');
            }
          }
        }
      });
    }

    function locationSearch(data){
      var _search = '';
      $.each(data, function(key, value){
        if (_search) {
          _search += '&';
        } else {
          _search += '?';
        }
        _search += key + '=' + encodeURIComponent(value);
      });
      if (_search) {
        $(window).scrollTop(0);
        history.pushState(null, null, _search);
      }
    }
  };
  sugarcane.module['state'][pageName] = 'load';
  sugarcane.module.callback(pageName);
}('mlist'));